<script>
import {h, resolveComponent} from "vue";
import list_url_info from '@/components/list_url_info.vue';

export default {
  components: {
    list_url_info: list_url_info,
  },
  name: "list_url",
  props: ['config', 'row_class', 'cell_class'],
  render(){
    let app = this;
    let info_child = [
      h('div', {class:'list_url-title'},[h('p',app.config.title)]),
      h(resolveComponent('forms'), {
        'config': this.config.forms_config,
        'ref': 'forms',
        'inline': true,
        'class': this.show_search ? '' : 'hidden',
        'btns': {
          '重置__small'(){ app.$refs['forms'].init();setTimeout(()=>{app.page.p = 1;app.list();},100) },
          '搜索_primary_small'(){ app.page.p = 1;app.list(); },
        }
      },this.$slots),
      h(resolveComponent('list_url_info'),{
        class: 'list_url_info',
        btns: this.config.btns,
      },this.$slots),
    ];
    let child = [
        h('div',{class:'flex', style:'flex-wrap: wrap;width: 100%;'}, info_child),

        h(resolveComponent('list'), {
          'ref': 'list',
          'data': this.list_data,
          'cols': this.config.list_cols,
          'has_select': true,
          'order': this.order,
          'onSelect:list': function (selected){
            app.selected = selected;
            app.selected_ids = selected.map((v)=>{return v.id});
          },
          'onUpdate:order': function(v){
            app.order = v;
            app.list();
          },
          'class': 'max',
          'row_class': this.row_class,
          'cell_class': this.cell_class,
        },this.$slots),
    ];
    if(this.config.limit) {
      child.push( h(resolveComponent('el-pagination'), {
        'style': 'padding: 10px;width: 100%;',
        'small': true,
        'total': this.page.count,
        'page-size': this.page.num,
        'page-sizes': [20, 50, 100, 300],
        'current-page': this.page.p,
        'background': false,
        'layout':'total, sizes, prev, pager, next, jumper',
        'onUpdate:current-page': function (v){
          app.page.p = v;
          app.list();
        },
        'onUpdate:page-size': function (v){
          app.page.num = v;
          app.page.p = 1;
          app.list();
        },
      }) )
    }
    return h('div', {
      'class': 'list_url-outer flex',
      'style':'flex-direction: column;height: 100%;width: 100%;',
    }, child);
  },
  data(){
    let is_iframe = !!this.$parent.__iframe;
    return {
      is_iframe: is_iframe,
      // show_search: is_iframe ? false : !!Object.keys(this.config.forms_config).length,
      show_search: !!Object.keys(this.config.forms_config).length,
      page: {count: 0,num: parseInt(this.config.limit) ,p: parseInt(this.config.p) || 1},
      list_data: [],
      selected: [],
      selected_ids: [],
      order: this.config.order,
      resdata: typeof(this.config.resdata) == 'function' ? this.config.resdata : function (list){return list;},
      handle_res: typeof(this.config.handle_res) == 'function' ? this.config.handle_res : function (res){return res;},
    }
  },
  methods:{
    list(data){
      let app = this;
      if (!this.config.api) return;
      let req_url = this.config.api;
      let param = [];
      if(this.config.limit) {
        param.push( (this.config.p_key||'p')+'='+(this.page.p-(this.config.p_start_1?0:1)) );
        param.push( (this.config.n_key||'n')+'='+this.page.num);
      }
      if(this.order) {
        let arr = this.order.split(' ');
        param.push('order['+arr[0]+']='+arr[1]);
      }
      let form_dom = this.$refs['forms'].$el;
      if (!form_dom) return;
      let search = s94(form_dom).serialize();
      if (search) param.push(search);
      if (data) param.push(s94Mjs.param_encode(data));
      if (param.length) req_url += (req_url.indexOf('?')==-1?'?':'&')+param.join('&');
      ajax({url:req_url, cache:true, loading:true},function(res){
        res = app.handle_res(res);
        app.list_data = app.resdata(res.data.list);
        app.page.count = res.data.count;
        return false
      })
    },
    //批量操作ids
    ids_action(ids, action, callback, action_alias){
      let map = {
        del: '删除',
        restore: '恢复',
        delete: '彻底删除',
      }
      action_alias = action_alias || map[action];
      if (!action_alias) return;
      let app = this;
      ids = ids || this.selected_ids.join(',');
      if (typeof(ids) != 'string') ids = Object.values(ids).join(',');
      if(!ids) return app.$message.error('所选内容为空');
      let req_url = s94Mjs.dirname(this.config.api)+'/'+action+'?ids='+ids;
      this.confirm('是否确定'+action_alias+'选中的数据', function (){
        ajax({url:req_url, loading:true},function(res){
          if (typeof(callback)!='function' || callback.call(app, res)!==false) {
            app.$parent.iframe_exe('index', '$refs.list_url.list');
          }
        })
      })
    },
    //批量删除
    del(ids, callback){
      this.ids_action(ids, 'del', callback)
    },
    //批量恢复
    restore(ids, callback){
      this.ids_action(ids, 'restore', callback)
    },
    //批量彻底删除
    delete(ids, callback){
      this.ids_action(ids, 'delete', callback)
    },

  },
  watch: {
    'config.forms_config'(v, oldV){
      if (!this.is_iframe) {
        this.show_search = !!Object.keys(v).length;
      }
    },
  },
  mounted(){
    this.list();
  }
}
</script>

<style scoped>
.list_url-outer{padding: 0 20px;background: #fff;border-radius: 8px;}
.list_url-outer .list_url-title{width: auto;padding: 20px 0;}
.list_url-outer .list_url-title p{height: 16px;line-height: 16px;border-left: 04px solid var(--el-color-primary);padding-left: 1em;}
.list_url-outer .list_url_info{flex-grow: 1;flex-basis: 200px;padding: 10px 0;}
</style>